<template>
  <header
    class="el-header"
    :style="{height}"
  >
    <slot />
  </header>
</template>

<script lang="ts">
export default { name: "ElHeader" };
</script>

<script lang="ts" setup>
import { withDefaults, defineProps } from "vue";
  interface Props {
    height?: string;
  }

const props = withDefaults(defineProps<Props>(), { height: "60px" });
console.log("height", props.height);
</script>

<style lang="scss" scope>
  @import "../styles/mixins";
  @include b(header) {
    padding: $--header-padding;
    box-sizing: border-box;
    flex-shrink: 0;
  }
</style>
